<template>
    <div class="area_agent" v-if="data">
        <Layout>
            <Header class="header">
                <Row>
                    <Col :span="12">
                        <div>
                            <span class="border-left"></span>
                            区域代理总览
                        </div>
                    </Col>
                    <Col :span="12" style="display:flex;justify-content:space-between">
                        <div>代理级别：{{level}}</div>
                        <div>代理区域：{{area}}</div>
                        <div>代理时间：{{create_time}}</div>
                    </Col>
                </Row>
            </Header>
            <Content class="content">
                <div class="overview">
                    <div class="card">
                        <i class="icon iconfont icon-order1"></i>
                        <div class="card-title">
                            <p class="line-h">区域抢单总额</p>
                            <p class="num line-h">￥{{data.p1 ? data.p1 : '- -'}}</p>
                        </div>
                    </div>
                    <div class="card">
                        <i class="icon iconfont icon-money"></i>
                        <div class="card-title">
                            <p class="line-h">我的代理提成</p>
                            <p class="num line-h">￥{{data.p2 ? data.p2 : '- -'}}</p>
                        </div>
                    </div>
                    <div class="card">
                        <i class="icon iconfont icon-coins"></i>
                        <div class="card-title">
                            <p class="line-h">已提现金额</p>
                            <p class="num line-h">￥{{data.p3 ? data.p3 : '- -'}}</p>
                        </div>
                    </div>
                    <div class="card">
                        <i class="icon iconfont icon-yue"></i>
                        <div class="card-title">
                            <p class="line-h">账户余额</p>
                            <p class="num line-h">￥{{balance}}</p>
                        </div>
                    </div>
                </div>

                <!-- <div class="overview">
                    <div class="card">
                        <i class="icon iconfont icon-coin"></i>
                        <div class="card-title">
                            <p class="line-h">参与分成总额</p>
                            <p class="num line-h">￥20000.00</p>
                        </div>
                    </div>
                    <div class="card">
                        <i class="icon iconfont icon-icon-test"></i>
                        <div class="card-title">
                            <p class="line-h">代理收益总额</p>
                            <p class="num line-h">￥20000.00</p>
                        </div>
                    </div>
                    <div class="black">
                        
                    </div>
                    <div class="black"> -->
                        <!-- <i class="icon iconfont icon-yue"></i>
                        <div class="card-title">
                            <p class="line-h">账户余额</p>
                            <p class="num line-h">￥2000</p>
                        </div> -->
                    <!-- </div>
                </div> -->
                
                <div class="card-income">
                    <Row :gutter="20">
                        <Col :span="24">
                            <div class="ivu-card ivu-card-bordered ivu-card-dis-hover">
                                <div class="ivu-card-head">
                                    <p data-v-57b29fc1="">收入总览</p>
                                </div>
                                <div class="ivu-card-body"> 
                                    <div class="income-one">
                                        <h1 class="red">{{data.s1 ? data.s1 : '- -'}}</h1>
                                        <p>今日增加</p>
                                    </div>
                                    <div class="income-one">
                                        <h1 class="red">{{data.s2 ? data.s2 : '- -'}}</h1>
                                        <p>昨日增加</p>
                                    </div>
                                    <div class="income-one">
                                        <h1 class="red">{{data.s3 ? data.s3 : '- -'}}</h1>
                                        <p>本月增加</p>
                                    </div>
                                    <div class="income-one">
                                        <h1 class="red">{{data.s4 ? data.s4 > 100000 ? (data.s4 / 10000) + '万' : data.s4 : '- -'}}</h1>
                                        <p>全部收入</p>
                                    </div>
                                </div>
                            </div>
                        </Col>
                    </Row>
                </div>

            </Content>
            <Footer>
                <p class="copy-right">Copyright © {{host}}, All Rights Reserved.</p>
            </Footer>
        </Layout>
    
    </div>
</template>

<script>
import store from '@/store/SessionStorageStore';
import * as api from '@/api/api';
export default {
    data() {
        return{
            host: window.location.host,
            loading: this.$store.state,
            area: '',
            level: '',
            create_time: '',
            data: '',
            balance: '',
        }
    },

    created() {
        this.getData();
    },

    mounted() {
        
    },

    methods: {
        getData() {
            let STORAGE_KEY = "Login";
            let userData = store.fetch(STORAGE_KEY);
            this.create_time = userData.create_time.split(' ')[0];
            this.area = userData.territory;
            this.balance = userData.balance;
            this.level = userData.territory.split(',').length == 1 ? '省级代理' : userData.territory.split(',').length == 2 ? '市级代理' : '区县代理';
            let body = {
                uid: userData.id
            };
            this.loading.isLoading = true;
            api.getPlaceData(body).then(res => {
                this.loading.isLoading = false;
                if(res.data.code === 200) {
                    this.data = res.data.data;
                }else {
                    this.$Notice.error({
                        title: '错误',
                        desc: res.data.msg
                    });
                    this.data = {
                        p1: 0,
                        p2: 0,
                        p3: 0,
                        p4: 0,
                        s1: 0,
                        s2: 0,
                        s3: 0,
                        s4: 0
                    };
                    this.create_time = '- -'
                }
            }).catch(err => {
                this.loading.isLoading = false;
                this.$Notice.error({
                    title: '错误',
                    desc: err
                });
            })
        }
    }
}
</script>

<style lang="less" scoped>
    @import '../../../assets/styles/constant.less';
    .area_agent{
        width: 100%;
        height: 100%;
        min-width: 1020px;
        overflow-x: hidden;
        overflow-y: auto;
        background-color: #f5f7f9;
        .ivu-layout{
            min-height: 100%;
        }
        .header{
            min-width: 840px;
            font-size: 14px;
            line-height: 40px;
            height: 40px !important;
            color: #434343;
            padding: 0 50px;
            background-color: @background;
            border-bottom: 1px solid #ddd;
            .border-left {
                border-left: 5px solid @baseColor;
                margin-right: 4px;
            }
        }
        .content{
            width: 100%;
            min-height: 76%;
            padding: 20px 60px;
            .overview{
                display: flex;
                justify-content: space-between;
                margin-top: 20px;
                .card{
                    border: 1px solid #ddd;
                    padding: 20px;
                    box-sizing: border-box;
                    display: flex;
                    width: 22%;
                    min-width: 220px;
                    .icon{
                        font-size: 54px;
                        color: @greenColor;
                    }
                    .card-title{
                        margin-left: 20px;
                        color: #999;
                        font-size: 16px;
                    }
                    .line-h{
                        line-height: 30px;
                        margin-top: 4px;
                    }
                    .num{
                        font-size: 18px;
                        color: #333;
                    }
                }
                .card-back{
                    border: 1px solid #ddd;
                    padding: 20px;
                    box-sizing: border-box;
                    display: flex;
                    width: 22%;
                    min-width: 220px;
                    .icon{
                        font-size: 54px;
                        color: @greenColor;
                    }
                    .card-title{
                        margin-left: 20px;
                        color: #999;
                        font-size: 16px;
                    }
                    .line-h{
                        line-height: 80px;
                        font-size: 20px;
                    }
                    .num{
                        font-size: 18px;
                        color: #333;
                    }
                }
                .black{
                    width: 22%;
                    min-width: 220px;
                }
            }
            .card-order{
                margin-top: 20px;
                .ivu-card-head{
                    background-color: #f2f2f2;
                }
                .ivu-card-body{
                    display: flex;
                    justify-content: space-between;
                }
                .card-con-one{
                    flex: 1;
                    margin-right: 40px;
                    .one-order{
                        height: 40px;
                        line-height: 40px;
                        border-bottom: 1px solid #eee;
                        display: flex;
                        justify-content: space-between;
                        .order-title{
                            cursor: pointer;
                        }
                        .order-title:hover{
                            color: @greenColor;
                        }
                        .red{
                            color: red;
                        }
                        .red:hover{
                            color: @greenColor;
                        }
                    }
                }
            }
            .card-income{
                margin-top: 20px;
                .ivu-card-head{
                    background-color: #f2f2f2;
                }
                .ivu-card-body{
                    display: flex;
                    justify-content: space-around;
                    .income-one{
                        padding: 10px 10px;
                        text-align: center;
                        .red{
                            color: #f04844;
                            font-weight: normal;
                        }
                    }
                }
            }
        }
        .copy-right{
            text-align: center;
            color: #aaa;
            font-size: 12px;
        }
    }
</style>
